<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">站点的地图分布</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom map">
            
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
            <div class="chart" id="chart_map" ></div>
          </div>
        </div> 
      </div> 
    </div>   
  </div>
</template>
<script>
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = data[i].name;
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: [data[i].longtitude,data[i].latitude,data[i].deviceCounts||0]
            });
        }
    }
    return res;
};

import echarts from 'echarts'
import 'echarts/map/js/china.js';

export default {
  name: "mapGIS",
  data() {
    return {
      tableData: [],
      timer: null,
     
    }
  },
  
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  
  methods: {
    getData() {
      const u = '/reception/bigScreen/querySiteGis';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.tableData =  res.data.data;
          this.getEchart();
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    getEchart() { // 初始化地图数据
      let myChart = echarts.init(document.getElementById('chart_map'));
      let showed = this.tableData && this.tableData.length ? false : true;
      let option = {
        title: {
          show: showed, // 是否显示title
          text: '暂无数据',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 400
          },
        },
        tooltip:{
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function (params) {
            var value = (params.value[2] + '').split('.');
            return '设备数量' + '<br/>'+ params.name + ':' + value + '个';
          }
        },
        legend:{
          show: false,
          orient: 'vertical',
          left: 'left',
          data:['']
        },
        //定义了一个坐标系
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: true,
              color: "#fff"
            }
          },
          roam: false,
          //   放大我们的地图
          zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "rgba(43, 196, 243, 0.52)",
              borderColor: "rgba(43, 196, 243, 1)",
              borderWidth: 1
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        selectedMode: 'single',
        series : [{
            name: '设备数量',
            type: 'scatter',
            symbolSize: 15,//控制点的大小
            coordinateSystem: 'geo',
            data: convertData(this.tableData),//加载数据
            // color: '#fff',
            itemStyle: {
              normal: {
                color: '#fff',
              },
              emphasis: {
                areaColor: "#2B91B7"
              }
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}"
              }
            },
        }]

      }

      myChart.setOption(option, true);
      myChart.on('click', function (param){
        if(param.componentType == "series") {
          console.log('param',param)	
        }
        
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
  
};
</script>

<style lang="less" scoped>
.chartsdom {
    width: 100%;
    height: 95%;
  }

.map {
  position: relative;
  height: 100%;
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    width: 100%;
  }
  .map1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: url(https://cloudcampusapps.top/large_screen/img/brand/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    width: 600px;
    height: 600px;
    background-image: url(https://cloudcampusapps.top/large_screen/img/brand/lbx.png);
    opacity: 0.6;
    -webkit-animation: rotate 45s linear infinite;
    animation: rotate 25s linear infinite;
    z-index: 2;
  }
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    opacity: 0.3;
    width: 580px;
    height: 580px;
    background-image: url(https://cloudcampusapps.top/large_screen/img/brand/jt.png);
    -webkit-animation: rotate1 40s linear infinite;
    animation: rotate1 20s linear infinite;
  }
}

@-webkit-keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
</style>
















